<template>
  <div
    class="soft-card">
    <a-card class="soft-card-border">
      <template #cover>
        <img
          @click="handleServiceTo(`${softItems.ip}`,softItems.disabled)"
          alt="example"
          :src="`${ softItems.project.imgUrl !== '' ? softItems.project.imgUrl : require('@/assets/placeholder1.png')}`"
          :class="computedImgStyle(softItems.disabled)"/>
        <!-- :src="require(`@/assets/placeholder${softItems.assertPic}.png`)" -->
      </template>
      <a-descriptions
        :column="1">
        <template #title>
          <a-tooltip :title="softItems.disabled * 1 === 1 ? 'no server' : `${softItems.ip}`">
            <span
              @click="handleServiceTo(`${softItems.ip}`,softItems.disabled)"
              :style="softItems.disabled*1 === 1 ? 'cursor: no-drop;':'cursor: pointer;'">
              {{softItems.project.name}} {{softItems.name}}
            </span>
          </a-tooltip>
          <!-- <span>{{softItems.project.name}} {{softItems.name}}</span> -->
        </template>
        <!-- <a-descriptions-item label="服务URL">
          <a-button
            :disabled="softItems.disabled * 1 === 1 ? true : false"
            @click="handleServiceTo(`http://${softItems.ip}:${softItems.port}`,softItems.disabled)"
            type="link"
            size="small">
              {{ softItems.disabled * 1 === 1 ? 'no server' : `http://${softItems.ip}:${softItems.port}` }}
          </a-button>
        </a-descriptions-item> -->
        <a-descriptions-item label="当前状态">
          {{softItems.status}}
        </a-descriptions-item>
        <a-descriptions-item label="软件版本">
          {{softItems.version}}
        </a-descriptions-item>
        <a-descriptions-item label="服务器配置">
          <a-tag color="#f50" v-if="softItems.disabled * 1 === 1">未配置</a-tag>
          <a-tag color="#87d068" v-if="softItems.disabled * 1 === 0">已配置</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="基础账号">
          {{softItems.baseUserId}}
        </a-descriptions-item>
        <a-descriptions-item label="基础密码">
          {{softItems.baseUserPsd}}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </div>
</template>

<script>
import { getCurrentInstance } from 'vue'
export default {
  props: {
    softItems: {
      required: true
    }
  },
  setup (props) {
    const { proxy } = getCurrentInstance()
    const computedImgStyle = (disabled) => {
      return disabled * 1 === 1 ? 'card-img-wh-disabled' : 'card-img-wh-abled'
    }
    return {
      handleServiceTo (url, disabled) {
        if (disabled * 1 === 1) {
          proxy.$root.$message.error('当前服务器未配置，无法打开')
          return
        }
        window.open(url)
      },
      computedImgStyle
    }
  }
}
</script>

<style lang='less' scoped>
  @hoverEasing: cubic-bezier(0.23, 1, 0.32, 1);
  @returnEasing: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  .soft-card:hover {
    transform: scale(1.03); // 放大1.5倍
    transition: all .3s; // 设置加载时间
    .soft-card-border {
      transition:
        0.6s @hoverEasing,
        box-shadow 2s @hoverEasing;
      box-shadow:
        rgba(10, 131, 245, 0.2) 0 0 40px 5px,
    }
  }
  .card-img-wh-abled {
    width: 60%;
    margin: 0 auto;
    cursor: pointer;
  }
  .card-img-wh-disabled {
    width: 60%;
    margin: 0 auto;
    cursor: no-drop;
  }
  .ant-btn-sm {
    padding: 0px
  }
  /deep/.ant-descriptions-header {
    margin-bottom: 12px;
  }
  /deep/.ant-card-body {
    padding: 20px 0px 12px 24px;
  }
  /deep/.ant-descriptions-row > td {
    padding-bottom: 8px;
  }
</style>
